/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect } from 'react'
import { Card , Table , Space , Button , Image , Tag , Popconfirm } from 'antd'
import { EditOutlined , DeleteOutlined } from '@ant-design/icons'
import { useDispatch, useSelector } from 'react-redux'
import { getArticle , delArticle } from '@/store/actions/article'
import { getArticleDetails } from '@/store/actions/publish'
import defaultImg from '@/assets/error.png'
import { STATUS , COLORS } from '@/enumeration/status'

// let dataSource = []
const columns = [
    {
      title: '封面',
      dataIndex: 'cover',
      render(cover) {
        // console.log(cover)
        if (cover.type === 0) {
          return <Image width={200} height={150} src={defaultImg }></Image>
        } else {
          return (
            <Image
              width={200}
              height={150}
              src={cover.images[0]}
              fallback={defaultImg }
            ></Image>
          )
        }
      }
    },
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render:(status)=> <Tag color={COLORS(status)} >{STATUS(status)}</Tag>
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate',
    },
    {
      title: '阅读数',
      dataIndex: 'read_count',
    },
    {
      title: '评论数',
      dataIndex: 'comment_count',
    },
    {
      title: '点赞数',
      dataIndex: 'like_count',
    },
    {
      title: '操作',
      // dataIndex: '数据属性名',
      render({id}){
         return (
          <Space>
          <Button
            type="primary"
               shape="circle"
               onClick={()=>deitHandler(id)}
            icon={<EditOutlined />}
          ></Button>
          <Popconfirm
            title="是否删除文章?"
            onConfirm={()=>deletHandler(id)}
            // onCancel={cancel}
            okText="确定"
            cancelText="取消"   
          >  
          <Button
            type="primary"
            shape="circle"
            danger
            icon={<DeleteOutlined />}
          ></Button>
          </Popconfirm> 
        </Space>
         )
      }
    },
]
let deletHandler 
let deitHandler 
const Func = ({ params, history }) => {
    const dispatch = useDispatch()
    deletHandler = async (id) => {
      await dispatch(delArticle(id))
      dispatch(getArticle())
    }
    deitHandler = async (id) => {
      history.push('/home/publish/' + id)
      await dispatch(getArticleDetails(id))
    }
    const {
       results:dataSource ,
       total_count:total,
       per_page: pageSize,
       page: current,} = useSelector(state=>state.article.articles)
    // 分页点击事件   
    const onChange = (page,per_page)=>{
      console.log(params)
      if(params){
        params.page = page
        params.per_page = per_page
      }
      dispatch(getArticle(params||{page,per_page}))
    }
    useEffect(()=>{
        dispatch(getArticle())
    },[])
return (
    <Card title={`根据筛选条件共查询到${total}条结果:`} style={{ marginTop: 10 }}>
        <Table rowKey='id' dataSource={dataSource} columns={columns} 
         pagination={{
          pageSize: pageSize, // 每页多少条
          current: current, // 当前几页
          total: total, // 总条数
          onChange: onChange // 改了页码，一页几条，就会触发
        }}/>
    </Card>
)}
export default Func